<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <div class="container">
      <div class="control">
            <button>选项1</button>
            <button>选项2</button>
            <button>选项3</button>
      </div>
      <div class="content">
            <div class="box">内容1</div>
            <div class="box">内容2</div>
            <div class="box">内容3</div>
      </div>
   </div>

   <!--
      根据代码，写出注释------------
    <script>
      // 创建构造函数
      function Table( btn_selector , content_selector){
         // 获取按钮元素
         this.btns = document.querySelectorAll( btn_selector );
         // 获取盒子元素
         this.contents = document.querySelectorAll( content_selector );
         // 获取函数索引
         this.index = 0;
         // 调用绑定函数
         this.bindEvent();
      }
      // 绑定事件函数-原始对象
      Table.prototype.bindEvent = function(){ 
         // this->实例对象
            var self = this;
            for(var i = 0 ; i < self.btns.length ; i ++){
               // 添加实例对象元素下标数字
                  self.btns[i].index = i;
                  // 给实例对象每一个元素绑定点击事件
                  self.btns[i].onclick = function(){
                    // 实例对象对应集合的元素下标跟集合元素下标一样
                       self.index = this.index;
                     //   执行切换事件函数
                       self.changeTable();
                  }
            }
      }
      // 切换事件函数-原始对象
      Table.prototype.changeTable = function(){
         // this->实例对象
            var self = this;
            // 进行实例对象中盒子元素集合的遍历
            for(var i = 0 ; i < self.contents.length ; i ++){
               // 更改集合内的每一个元素状态为"none"
                  self.contents[i].style.display = "none";
            }
            // 因为上面声明了例对象的元素下标跟DOM元素下标一样，所以跟所点击的按钮绑定，改变display状态
            self.contents[self.index].style.display = "block";
      }
      var tab1 = new Table(".control button" , ".box");
      </script>       -->

 <!-- 
    根据注释，写代码-------------
     <script>
      // 创建构造函数
      function Table(btn_selector,content_selector){
         // 获取按钮元素
         this.btns = document.querySelectorAll(btn_selector);
         // 获取盒子元素
         this.contents = document.querySelectorAll(content_selector)
         // 获取函数索引
         this.index = 0;
         // 调用绑定函数
        this.bindEvent();
// (this指向的是构造函数还是实例函数)
          
      }
      // 绑定事件函数-原始对象
      Table.prototype.bindEvent = function(){
         // this->实例对象
         var self = this;
         for(var i = 0 ; i < self.btns.length ; i ++){
            // 添加实例对象元素下标数字
               self.btns[i].index = i;
                  // 给实例对象每一个元素绑定点击事件
                  self.btns[i].onclick = function(){
                      // 实例对象对应集合的元素下标跟集合元素下标一样
                     self.index = this.index;
                      //   执行切换事件函数
                      self.changeTable();
                  }
         }             
                  
      }       
      // 切换事件函数-原始对象
      Table.prototype.changeTable = function(){

         // this->实例对象
         var self = this;
            // 进行实例对象中盒子元素集合的遍历
            for(var j=0;j<self.contents.length;j++){
               // 更改集合内的每一个元素状态为"none"
               self.contents[j].style.display = "none";  
            }
            // 因为上面声明了例对象的元素下标跟DOM元素下标一样，所以跟所点击的按钮绑定，改变display状态
         self.contents[self.index].style.display = 'block';
      }
            var tab1 = new Table(".control button",".box");
      </script>    -->



   <script>
      // 创建构造函数
      function Table(btn_selector,content_selector){
         // 获取已有的元素
         // 按钮元素
         this.btns = document.querySelectorAll(btn_selector);
         // 盒子元素
         this.contents = document.querySelectorAll(content_selector);
         // 函数下标
         this.index = 0;
         // 调用绑定函数
         this.bindEvent();
      }
      // 事件绑定函数
      Table.prototype.bindEvent = function(){
         // 转换this
         var self = this;
         for(var i=0;i<self.btns.length;i++){
            // 在DOM对象上记录当前的数据
            self.btns[i].index = i;
            // 绑定点击事件
            self.btns[i].onclick = function(){
               self.index = this.index;
               self.changeTable();
            }
           
         }
      }
      // 事件切换函数
      Table.prototype.changeTable = function(){
         // 转换this
         var self = this;
         for(var j=0;j<self.contents.length;j++){
            self.contents[j].style.display = 'none';
         }
         self.contents[self.index].style.display = 'block';
      }
      // 实例对象
      var tab1 = new Table(".control button",".box" );
   </script>
</body>
</html>